<template>
  <div class="app-container">
    <!-- 搜索区 -->
    <div>
      <SearchForm
        :form="searchData.form"
        :options="searchData.options"
        @searchUpdate="search"
        @resetSearchData="resetSearchData"
      ></SearchForm>
    </div>
    <!-- 按钮区 -->
    <div>
      <ButtonForm :buttonList="buttonList" @clickButton="clickButton"></ButtonForm>
    </div>
    <!-- 表格 -->
    <v-table
      :table-columns="tableColumns"
      :table-data="tableData"
      :loading="loading"
      :is-index="true"
      ref="table">
      <template #dictRadio="scope">
        {{getDictValue(scope.row.dictRadio, dictRadioOptions)}}
      </template>
      <template #dictCheckbox="scope">
        {{getCheckBoxValue(scope.row.dictCheckbox, dictCheckboxOptions)}}
      </template>
      <template #dictSelect="scope">
        {{getDictValue(scope.row.dictSelect, dictSelectOptions)}}
      </template>
      <template #operation="scope">
        <i v-hasPermission="['testCode:add']" class="el-icon-edit table-operation" style="color: #2db7f5;"
           @click="handleEdit(scope.row)"> 编辑</i>
        <i v-hasPermission="['testCode:delete']" class="el-icon-delete table-operation" style="color: #f50;"
           @click="singleDelete(scope.row)"> 删除</i>
      </template>
    </v-table>
    <!-- 页码 -->
    <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                @pagination="search"/>
    <!-- 详情 -->
    <detailDialog :dialog-visible="detailDialogShow"
                  @success="editSuccess"
                  @close="editClose"
                  :openType="detailOpenType"
                  :id="detailId"
                  :title="detailTitle"
    ></detailDialog>
  </div>
</template>

<script>
  import { testCodePage,
    testCodeExport,
    testCodeDelete } from '@/api/testCode'
  import SearchForm from '@/components/searchForm/index'
  import ButtonForm from '@/components/ButtonForm/index'
  import VTable from '@/components/VTable/index'
  import Pagination from '@/components/Pagination/index'
  import detailDialog from './detail.vue'
  export default {
    components:{
      VTable,Pagination,detailDialog,SearchForm,ButtonForm
    },
    data(){
      return{
        tableColumns:[
          {
            prop: 'name',
            label: '名称',
            minWidth: '150',
            slotname: 'name',
            options: {}
          },
          {
            prop: 'num',
            label: '数量',
            minWidth: '150',
            slotname: 'num',
            options: {}
          },
          {
            prop: 'sendTime',
            label: '发送日期',
            minWidth: '150',
            slotname: 'sendTime',
            options: {}
          },
          {
            prop: 'dictRadio',
            label: '字典radio',
            minWidth: '150',
            slotname: 'dictRadio',
            options: {}
          },
          {
            prop: 'dictCheckbox',
            label: '字典checkBox',
            minWidth: '150',
            slotname: 'dictCheckbox',
            options: {}
          },
          {
            prop: 'dictSelect',
            label: '字典select',
            minWidth: '150',
            slotname: 'dictSelect',
            options: {}
          },
          {
            prop: 'remark',
            label: '备注',
            minWidth: '150',
            slotname: 'remark',
            options: {}
          },
          {
            prop: 'operation',
            label: '操作',
            width: '200',
            align: 'center',
            slotname: 'operation',
            overflow: false,
            fixed: 'right'
          }
        ],
        tableData:[],
        selection: [],
        loading:false,
        total:1,
        pageNum:1,
        pageSize:10,
        detailOpenType:"add",
        detailDialogShow:false,
        detailId:"",
        detailTitle:"新增",
        dict:{},
        searchData:{
          form:{
            name:'',
            sendTimeRange:[],
            dictRadio:'',
            dictSelect:'',
          },
          options:[
            {
              title:'名称',
              key: "name",
              type: "text",
            },
            {
              title:'发送日期',
              key: "sendTimeRange",
              type: "date-to-date",
            },
            {
              title:'字典radio',
              key: "dictRadio",
              type: "select",
              multiple:false,
              option: {
                data: this.dictRadioOptions,
                props: {
                  key: "id", // 指定key对应data的字段
                  label: "label", // 指定label对应data的字段
                  value: "value", // 指定value对应data的字段
                },
              },
            },
            {
              title:'字典select',
              key: "dictSelect",
              type: "select",
              multiple:false,
              option: {
                data: this.dictSelectOptions,
                props: {
                  key: "id", // 指定key对应data的字段
                  label: "label", // 指定label对应data的字段
                  value: "value", // 指定value对应data的字段
                },
              },
            },
          ]
        },
        buttonList:[
          {name:'新增',methods:'handleAdd',type:'primary'},
          {name:'导出',methods:'handleExport',type:'success'}
        ],
        // 字典
        dictRadioOptions:[],
        dictCheckboxOptions:[],
        dictSelectOptions:[],
      }
    },
    watch: {
      // 字典
      'dictRadioOptions':{
        handler(newVal, oldVal) {
          this.searchData.options.forEach(t=>{
            if(t.key=='dictRadio'){
              t.option.data = newVal
            }
          })
        },
        deep: true,
        immediate: true
      },
      'dictCheckboxOptions':{
        handler(newVal, oldVal) {
          this.searchData.options.forEach(t=>{
            if(t.key=='dictCheckbox'){
              t.option.data = newVal
            }
          })
        },
        deep: true,
        immediate: true
      },
      'dictSelectOptions':{
        handler(newVal, oldVal) {
          this.searchData.options.forEach(t=>{
            if(t.key=='dictSelect'){
              t.option.data = newVal
            }
          })
        },
        deep: true,
        immediate: true
      },
    },
    methods:{
      getCheckBoxValue(value,option){
        if(!value){
          return
        }
        let temp = []
        let data = value.split(",")
        data.forEach(t=>{
          let item = option.find(x=> x.value == t)
          if(item != undefined){
            temp.push(item.label)
          }
        })
        return temp.join(",")
      },
      getDictValue(value,option){
        let item = option.find(t=> t.value == value)
        if(item!=undefined){
          return item.label
        }
        return value
      },
      editClose(){
        this.detailDialogShow = false
      },
      editSuccess(){
        this.search()
        this.detailDialogShow = false
      },
      search(){
        this.fetch({
          ...this.searchData.form,
        })
      },
      fetch(params={}){
        params.pageSize = this.pageSize
        params.pageNum = this.pageNum
        this.loading = true
        testCodePage(params).then(res=>{
          if(res.code==200){
            this.total = res.data.total
            this.tableData = res.data.rows
          }else{
            this.$message({
              message: this.$t('tips.systemException'),
              type: 'error'
            })
          }
        }).finally(final=>{
          this.loading = false
        })
      },
      // 重置搜索条件
      resetSearchData(){
        this.searchData.form = {
          name:'',
          sendTime:'',
          dictRadio:'',
          dictSelect:'',
        }
      },

      // 触发按钮区域按钮方法
      clickButton(methods){
        this[methods]()
      },
      handleAdd(){
        this.detailOpenType = "add"
        this.detailTitle = "新增"
        this.detailDialogShow = true
      },
      handleEdit(row){
        this.detailId = row.id
        this.detailOpenType = "edit"
        this.detailTitle="编辑"
        this.detailDialogShow = true
      },
      handleExport(){
        let params = {
          ...this.searchData.form
        }
        testCodeExport(params,`代码生成测试_${new Date().getTime()}.xlsx`);
      },

      closeDialog(){
        this.detailDialogShow = false
      },

      singleDelete(row){
        this.$confirm(this.$t('tips.confirmDelete'), this.$t('common.tips'), {
          confirmButtonText: this.$t('common.confirm'),
          cancelButtonText: this.$t('common.cancel'),
          type: 'warning'
        }).then(() => {
          this.loading = true
          testCodeDelete(row.id).then(res=>{
            if(res.code==200){
              this.$message({
                message: this.$t('tips.deleteSuccess'),
                type: 'success'
              })
              this.search()
            }else{
              this.$message({
                message: this.$t('tips.systemException'),
                type: 'error'
              })
            }
          }).finally(final=>{
            this.loading = false
          })
        })
      }
    },
    activated(){
      this.fetch()
    },
    created(){
      // 获取字典值
      this.$commonJs.filterDataDict("sex",this.dictRadioOptions)
      this.$commonJs.filterDataDict("useState",this.dictCheckboxOptions)
      this.$commonJs.filterDataDict("useState",this.dictSelectOptions)
    }
  }
</script>

<style lang="scss" scoped>
</style>
